<template>
  <el-dialog
    :visible.sync="visible"
    width="60%"
    destroy-on-close
    title="上游依赖任务"
    append-to-body
  >
    <div class="header-row">
      <div class="header-left">
        <el-form
          :model="queryCriteria"
          :inline="true"
          :style="{
            display: 'flex',
            warp: 'no-warp',
          }"
        >
          <el-form-item label="任务名称:" prop="name">
            <el-input
              v-model="jobDesc"
              placeholder="请输入任务名称"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="header-right">
        <el-button round type="info" @click="resetHandler">
          重置
        </el-button>
        <el-button round type="primary" @click="queryHandler">
          查询
        </el-button>
      </div>
    </div>
    <div class="table-wrapper">
      <el-table ref="multipleTable"
        :data="data" stripe
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column type="index" width="50" label="序号" align="center" fixed="left"/>
        <el-table-column label="作业名称" prop="jobDesc" width="auto" align="center"/>
        <el-table-column label="所属任务分类" prop="belongToDir" width="auto" align="center"/>
        <el-table-column label="任务状态" prop="triggerStatus" width="auto" align="center">
          <template v-slot="scope">
            <el-tag :type="scope.row.triggerStatus == 1 ? 'success' : 'primary'">{{ scope.row.triggerStatus == 1 ? '启用' : '未启用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="调度类型" prop="taskScheduleType" width="auto" align="center">
          <template v-slot="scope">
            <span>{{ scope.row.taskScheduleType == 'batch' ? '周期' : '实时' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="调度周期" prop="dependCycle" width="auto" align="center">
          <template v-slot="scope">
            <span>{{ getCycleLabel(scope.row.dependCycle) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="任务级别" prop="level" width="auto" align="center">
          <template v-slot="scope">
            <span>{{ 'T' + scope.row.level }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后修改时间" prop="updateTime" width="300" align="center"/>
      </el-table>
    </div>
    <div class="btn-section">
      <el-button type="primary" @click="confirmHandle">确认</el-button>
      <el-button @click="visible=false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import BaseQueryPageForm from '@/views/common/mixins/BaseQueryPageForm'
import request from './utils/request'
import {getCycleLabel} from '../denpendencyView/util'
export default {
  mixins: [BaseQueryPageForm],
  components: {  },
  data() {
    return {
      jobDesc: '',
      visible: false,
      data: [],
      id: '',
      currentRow: {},
    }
  },
  methods: {
    getCycleLabel,
    queryHandler() {
      this.requestData();
    },
    resetHandler() {
      this.jobDesc = '';
      this.requestData();
    },
    handleCurrentChange(row) {
      this.currentRow = row;
    },
    init(xxljobId) {
      this.visible = true;
      this.id = xxljobId;
      this.requestData();
    },
    requestData() {
      return request({
        url: '/xxlJob/relation/optionalPreRelationList',
        method: 'get',
        params: {
          xxlJobId: this.id,
          jobDesc: this.jobDesc
        }
      }).then(res=> {
        this.data = res;
      })
    },
    confirmHandle() {
      if(!this.currentRow.id) {
        this.$message.error('请先选择要添加的上游任务');
        return;
      }
      request({
        url: '/xxlJob/relation/addRelation',
        method: 'post',
        data: [
          {
            lastNodeId: this.currentRow.id,
            nextNodeId: this.id
          }
        ]
      }).then(res=> {
        this.$message.success('操作成功');
        this.$emit('addSuccess');
        this.visible = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header-row {
  display: flex;
  justify-content: space-between;
  .header-left {
    flex: 1;
  }
  .header-right {
    width: 200px;
    text-align: right;
  }
}
.title {
  font-size: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  &::before {
    content: '';
    background-color: #3c9afb;
    display: inline-block;
    width: 6px;
    height: 26px;
    margin-right: 10px;
  }
}
.dependency-config {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  .option-item {
    margin-bottom: 10px;
  }
}
.new {
  margin-bottom: 10px;
}
.btn-section {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
